<template>
  <section>
    <div class="custorm--modelbox livelist-edit">
       <div class="renohome-right-nav flex-row flex-justify-c flex-align-c">
        <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange" :showChange="'1'"></renohome-right-nav>
      </div>
      <section>
        <div class="edit-form-item">
          <div class>
            <h5 style="margin-bottom:10px">查看</h5>
            <el-radio-group v-model="radio" @change="changeLive">
              <el-radio :label="1">直播中/预告</el-radio>
              <el-radio :label="2">回放</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="edit-form-item">
          <div class="addLiveRoomList">
            <h5>添加直播间列表</h5>
            <div class style="margin-top:16px">
              <el-tag
              style="margin:4px"
                :key="index"
                v-for="(tag,index) in allRoom"
                closable
                :disable-transitions="false"
                @close="handleClose(tag.room_id)"
              >{{tag.name}}</el-tag>
            </div>
          </div>
          <div class="goodscol-add" @click="chooseLiveRoom(1)">
            <i class="el-icon-plus"></i> 添加
          </div>
        </div>
        <div class="edit-form-item">
          <div class="addLiveRoomList">
            <h5>选择直播回放</h5>
             <div class style="margin-top:16px">
              <el-tag
              style="margin:4px"
                :key="index"
                v-for="(tag,index) in allBack"
                closable
                :disable-transitions="false"
                @close="handleCloseBack(tag.room_id)"
              >{{tag.name}}</el-tag>
            </div>
          </div>
          <div class="goodscol-add" @click="chooseLiveRoom(2)">
            <i class="el-icon-plus"></i> 添加
          </div>
        </div>
      </section>
    </div>

    <div class="modelBackground" v-show="dialogFormVisible">
      <div class="modelContent">
        <div class="modelHead">
          <div class>
            <span>选择直播间</span>
          </div>
          <div class @click="dialogFormVisible=false">
            <i class="el-icon-close del"></i>
          </div>
        </div>
        <div class="modelMain">
          <div class="modelLeft">
            <h5>直播间列表</h5>
          </div>
          <div class="modelRight">
            <el-scrollbar style="width:100%;height: 520px;max-height: 520px;">
              <div class="goods-serch">
                <el-input placeholder="搜索名称" v-model="searchData"></el-input>
                <i class="el-icon-search pos-col-center" @click="filesSerch"></i>
              </div>
              <div class="oneWrap">
                <div class="modelOne" v-for="(item,index) in liveRoomList " :key="index">
                  <div
                    class="backImg"
                    v-if="item.share_img"
                    :style="{'background-image':`url(${item.share_img})`}"
                  ></div>
                  <div class="liveName">
                    <p>{{item.name}}</p>
                    <el-button
                      type="primary"
                      round
                      plain
                      size="mini"
                      :class="{'is-active':currentRow.includes(item)}"
                      style="font-size:12px;width:50px"
                      @click="chooseLive(item.room_id,item)"
                    >{{`${currentRow.includes(item)?'取消':'选择'}`}}</el-button>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="pagination-content flex-row flex-justify-b flex-align-c myPage">
          <el-row class="pagination-btns"></el-row>
          <el-pagination
            style="margin-top:20px;margin-bottom:20px;margin-right: 25px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-sizes="pagination.pagesizes"
            :page-size.sync="pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
        <div class="modelFfoot">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureRooms">确 定</el-button>
          </span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/editConfig'
import { getPlugLiveList } from '@/api/platform'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      radio: 1,
      liveRoomList: [],
      currentRow: [],
      type: 1,
      searchData: '',
      allRoom: [],
      allBack: [],
      pagination: {
        page: 1,
        list_rows: 10,
        pagesizes: [10, 20, 50],
        total: 0
      }
    }
  },
  mounted() {
    console.log('这个是edit里面的输出——————————————')
    console.log(this.defaultConfig)
    console.log(this.custormItemData)
    this.allRoom = this.custormItemData.liveData
    this.allBack = this.custormItemData.backLiveData
  },
  methods: {
    handleClose(id) {
      console.log(id)
      this.allRoom.map((item, index) => {
        if (item.room_id == id) {
          this.allRoom.splice(index, 1)
          //   this.custormItemData.data = this.allRoom;
          this.custormItemData.liveData = this.allRoom
          return
        }
      })
    },
    handleCloseBack(id) {
      console.log(id)
      this.allBack.map((item, index) => {
        if (item.room_id == id) {
          this.allBack.splice(index, 1)
          // this.custormItemData.data = this.allBack;
          this.custormItemData.backLiveData = this.allBack
          return
        }
      })
    },
    changeLive(val) {
      if (val == 1) {
        this.custormItemData.data = this.allRoom
        this.custormItemData.liveShow = true
        // this.custormItemData.liveData=this.allRoom;
        // this.custormItemData.liveShow=true;
        console.log(this.allRoom)
      } else {
        this.custormItemData.liveShow = false
        this.custormItemData.data = this.allBack
        //  this.custormItemData.backLiveData = this.allBack;
        //  this.custormItemData.liveShow=false;
        console.log(this.allBack)
      }
    },
    handleSizeChange(val) {
      console.log(val)
      this.pagination.list_rows = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getList()
    },
    chooseLiveRoom(type) {
      console.log(type)
      this.type = type
      this.searchData = ''
      this.currentRow = []
      this.dialogFormVisible = true

      console.log(this.custormItemData)
      this.getList()
    },
    sureRooms() {
      this.dialogFormVisible = false
      if (this.type == 1) {
        this.allRoom.push.apply(this.allRoom, this.currentRow)
        this.allRoom = Array.from(new Set(this.allRoom))
        this.custormItemData.liveData = this.allRoom
        this.custormItemData.liveShow = true
        this.radio = 1
        this.custormItemData.data = this.allRoom
      } else {
        this.allBack.push.apply(this.allBack, this.currentRow)
        this.allBack = Array.from(new Set(this.allBack))
        this.custormItemData.backLiveData = this.allBack
        this.custormItemData.liveShow = false
        this.radio = 2
        this.custormItemData.data = this.allBack
      }

      console.log(this.custormItemData)
    },
    filesSerch() {
      this.getList()
    },
    getList() {
      getPlugLiveList({
        type: this.type,
        page: this.pagination.page,
        size: this.pagination.list_rows,
        name: this.searchData
      }).then((res) => {
        console.log(res.data.data)
        const data = res.data.data
        this.liveRoomList = data.data
        this.pagination.total = data.total
      })
    },
    chooseLive(ids, val) {
      console.log(ids, val)

      if (this.currentRow.length == 0) {
        this.currentRow.push(val)
        return
      } else {
        this.currentRow.map((item, index) => {
          if (item.room_id == ids) {
            this.currentRow.splice(index, 1)
            return
          } else {
            this.currentRow.push(val)
            return
          }
        })
      }
      //  console.log( this.currentRow.includes(val))
    }
  }
}
</script>

<style lang="scss" scoped>

.addLiveRoomList {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 4px;
}
.goodscol-add {
  margin-top: 16px;
  border: 1px solid #6b7685;
  line-height: 32px;
  height: 32px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  background-color: #ffffff;
}
.modelBackground {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101 !important;
  background: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myPage {
  margin-top: 26px;
}
.modelContent {
  background-color: #ffffff;
  position: absolute;
  border-radius: 4px;
  width: 620px;
  height: 700px;
  z-index: 9999;
}
.modelHead {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #dcdfe6;
}
.del {
  font-size: 20px;
  &:hover {
    color: #409eff;
  }
}
.is-active {
  border-color: transparent;
  color: #fff !important;
  background: #409eff !important;
}
.oneWrap {
  display: flex;
  flex-wrap: wrap;
}
.modelMain {
  margin-top: 16px;
  display: flex;
  height: 70%;
  .modelLeft {
    width: 25%;
    text-align: center;
    border-right: solid 1px #dcdfe6;
    height: 100%;
  }
  .modelRight {
    margin-left: 16px;
    width: 75%;
    .modelOne {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      width: 200px;
      padding: 10px;
      display: flex;
      margin: 10px;

      .backImg {
        border-radius: 10px;
        width: 90px;
        min-width: 90px;
        height: 80px;

        margin-right: 10px;
      }
      .liveName {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
.modelFfoot {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
/deep/ .goods-serch {
  position: relative;
  margin-bottom: 20px;
  text-align: left;

  .el-input__inner {
    width: 200px;
    border: none;
    background: rgb(237, 237, 237);
    border-radius: 20px;
    font-size: 12px;
  }

  i {
    cursor: pointer;
    left: 200px;
    margin-left: -35px;
    font-size: 20px;
  }
}
</style>

